<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>品牌公司管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="refresh" content="1200">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/fixedTable/fixed-table.css"/>
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>
        [v-cloak] {
            display: none;
        }

        .fixed-table-box th {
            position: relative;
            text-align: left;
            height: 24px;
            border: 0px;
        }

        table tr td {
            border: 0px;
            text-align: center !important;
            height: 24px;
            line-height: 24px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        select {
            border: 0px;
            color: #2a8cec;
            height: 24px;
            width: 100%;
            line-height: 24px;
        }

        .fixed-table-box td {
            border: 0px;
            border-bottom: 1px solid rgb(203, 203, 205);
            height: 24px;
            line-height: 24px;
            padding: 0px;
        }

        .ken {
            border-width: 1px !important;
            border-style: solid !important;
            border-color: rgb(203, 203, 205) !important;
            border-image: initial !important;
            border-top: 0px !important;
        }

        /*   .fixed-table_body tr:nth-of-type(odd) {
               background: #F9F9F9;
           }*/

        td input {
            padding-left: 2px;
            color: #2a8cec;
            width: 100%;
            height: 24px;
            line-height: 24px;
            border: 0px;
            /* box-shadow: inset 0px 0px 1px #5f7182;
             border: 1px solid #79bcfd;*/
        }
        .content {
            padding: 8px 8px 0 8px;
        }

    </style>
</head>
<body>
<section class="content" id="app" v-cloak>
    <div class="oaLoad">
        <div class="loadGif" id="areaProgress"></div>
    </div>
    <div class="div-td-content-more"><i></i></div>
    <div class="box-body no-padding iframeH" style="overflow: auto;" id="scrollDiv">
        <div id="progress" class="wyui-progress"></div>
        <div class="fixed-table-box head-fixed ">
            <div class="fixed-table_header-wraper">
                <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0">
                    <thead>
                    <tr>
                        <th style="width:180px;">
                            <div class="table-cells">公司</div>
                        </th>
                        <th style="width:85px;">
                            <div class="table-cells">品牌</div>
                        </th>

                        <th style="width:280px;">
                            <div class="table-cells">质保公司</div>
                        </th>
                        <th style="width:280px;">
                            <div class="table-cells">融资公司</div>
                        </th>
                        <th style="width:280px;">
                            <div class="table-cells">制作公司</div>
                        </th>
                        <th>
                            <div class="table-cells">操作</div>
                        </th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="fixed-table_body-wraper iframeFixed">
                <table class="fixed-table_body table-hover" cellspacing="0" cellpadding="0" border="0"
                       style="width: 100%;">
                    <tbody>
                    <tr v-for="(item,i) in list.main">

                        <td style="width:180px;">
                            <select v-model="item.companyId" @change="getBrandList(item)">
                                <option v-for="(item1,i1) in companyList" :value="item1.id">
                                    {{item1.allName?item1.allName:item1.name}}
                                </option>
                            </select>
                        </td>

                        <td style="width:85px;">
                            <select v-model="item.brandId">
                                <option v-for="(item2,i2) in item.brandList" :value="item2.id">
                                    {{item2.brandName}}
                                </option>
                            </select>
                        </td>
                        <td style="width:280px;" class="ken">
                            <input type="text" v-model="item.qualityCompany">
                        </td>

                        <td style="width:280px;" class="ken">
                            <input type="text" v-model="item.financeCompany">
                        </td>

                        <td style="width:280px;" class="ken">
                            <input type="text" v-model="item.manufacturingCompany">
                        </td>

                        <td>
                            <a href="javascript:void(0);"
                               @click="addRow(i)">&nbsp;新增&nbsp;</a>
                            <a href="javascript:void(0);" style="color: red;"
                               @click="delRow(i)">&nbsp;删除&nbsp;</a>
                        </td>
                    </tr>


                    </tbody>
                </table>
            </div>
        </div>
        <div style="margin-top: 20px;position: relative; ">
            <input type="button" value="保存" style="position: absolute;left: 50%;" @click="save"
                   class="btn btn-primary btn-sm">
        </div>
    </div>

    <!--<div class="oa-pager text-center" style="margin-top: 5px;">
        共
        <span id="allCount"> 0 </span>条记录&nbsp;&nbsp;&nbsp;
        <span id="nowPage"> 1 </span>/<span id="allPage">1</span>&nbsp;&nbsp;&nbsp;
        <span class="oa-pager-button" id="first">首页</span>
        <span class="oa-pager-button" id="prev">上一页</span>
        <span class="oa-pager-button" id="next">下一页</span>
        <span class="oa-pager-button" id="last">尾页</span>
    </div>-->
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script src="/dist/plugins/fixedTable/fixed-table.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne", ".lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + 12 + "px",
                        "left": $(this).offset().left - 6,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script type="text/javascript">

    var app = new Vue({
            el: '#app',
            data: {
                userId: getCurrentUser().id,
                userName: getCurrentUser().name,
                one: {
                    "companyId": "",
                    "companyName": "",
                    "brandId": "",
                    "brandName": "",
                    "authenticbrandsGroup": "",
                    "financeCompany": "",
                    "manufacturingCompany": ""
                },
                companyList: [],
                list: {
                    main: [],
                },
                companyObj: {},
                brandObj: {},

            },

            methods: {
                getCompanyList: function () {
                    var that = this;

                    $.wyui.postMethod("/company/getCompanyByUserId.json", {userId: getCurrentUser().id}, function (data) {
                        that.companyList = data;
                        if (that.companyList && that.companyList.length > 0) {
                            for (var i = 0; i < that.companyList.length; i++) {
                                var k = that.companyList[i].id;
                                var v = that.companyList[i].name;
                                that.companyObj.set(k, v);
                            }
                        }
                    });
                },
                getBrandList: function (item) {
                    var that = this;
                    data = {
                        companyId: item.companyId,
                    };
                    $.wyui.postMethod("/deviceBrand/getBrandByCompanyId.json", data, function (data) {
                        item.brandList = data.brands;
                        if (item.brandList && item.brandList.length > 0) {
                            for (var i = 0; i < item.brandList.length; i++) {
                                var k = item.brandList[i].id;
                                if (!that.brandObj.hasOwnProperty(k)) {
                                    var v = item.brandList[i].brandName;
                                    that.brandObj.set(k, v);
                                }
                            }
                        }
                    });
                },
                save: function () {
                    var that = this;
                    var list = that.list.main;
                    for (var i = 0; i < list.length; i++) {
                        delete list[i].brandList;
                        delete list[i].createTime;
                        list[i].brandName = that.brandObj.get(list[i].brandId);
                        list[i].companyName = that.companyObj.get(list[i].companyId);
                    }
                    $.wyui.postLoadMethod("/deviceCompanyBrand/save.json", trimRN(list), function (data) {
                        top.$.alert({
                            win: this,
                            height: 180,
                            width: 300,
                            icon: '1', //1成功 2失败 3提示 不穿代表无图标
                            title: '保存成功',
                            content: '',
                            blankclose: false,//点击空白是否可关闭
                            cancel: "确定",
                            cancelCallback: function (em, opts) {
                                em.remove()
                                opts.close && opts.close()
                                top.refreshTabByName("品牌公司管理", "no");
                            }
                        })
                    }, false, true);
                },
                addRow: function (i) {
                    var that = this;
                    var one = {
                        "companyId": "",
                        "companyName": "",
                        "brandId": "",
                        "brandName": "",
                        "authenticbrandsGroup": "",
                        "financeCompany": "",
                        "manufacturingCompany": "",
                        "brandList": ""
                    };
                    that.list.main.splice(i + 1, 0, one);
                },
                delRow: function (i) {
                    var that = this;
                    that.list.main.splice(i, 1);
                },
                timeSub: function (time) {
                    if (time) {
                        return new Date(time).Format(TimeFormat.pcList)
                    } else {
                        return '';
                    }
                },
                init: function () {
                    var that = this;
                    that.companyObj = new Map();
                    that.brandObj = new Map();
                },
            },
            mounted: function () {
                var that = this;
                that.init();
                that.getCompanyList();
                $.wyui.page.dataUrl = server.ip + "/deviceCompanyBrand/getDeviceCompanyBrandList.json";
                $.wyui.page.queryParams.userId = getCurrentUser().id;
                $.wyui.page.queryParams.load = true;
                $.wyui.page.queryParams.pageSize = 1000;

            }
        })
    ;
    $.wyui.page.getByPage_callback = function (r) {
        for (var i = 0; i < r.length; i++) {
            r[i].brandList = [];
            app.getBrandList(r[i]);
        }
        app.list.main = r;
        console.log(app.list.main.length)
        $(".oaLoad").hide();
        //document.getElementById("scrollDiv").scrollTop = 0;
    };
    $.wyui.page.getByPage_scroll_callback = function (list) {
        if (list.length < 30) {
            isLoad = false;
        } else {
            for (var i = 0; i < list.length; i++) {
                app.list.push(list[i]);
            }
            isLoad = true;
        }
    };
</script>
<script>
    //初始化FixedTable
    $(".fixed-table-box").fixedTable();
</script>
</body>
</html>